<template>
	<view class="statement">
		<image :src="baseUrl+'assets/static/report_bg.png'" mode="" class="creatBg"></image>
		<view class="repair_main">
			<view class="title">
				<view class="repair-left" />
				<text>报告类型</text>
			</view>
			<view class="card-detail">
				<view class="ful-detail">
					<view class="detail-left">设备类型</view>
					<view class="detail-right" style="flex:1">
						{{order_detail.equipment.pinpai.name||'-'}}
					</view>
				</view>
				<view class="ful-detail" @tap="choiceType()">
					<view class="detail-left">报告级别</view>
					<view class="detail-right" style="flex:1">
						{{service_default}}
						<view class="arrow" />
					</view>
				</view>
			</view>
			<view class="title">
				<view class="repair-left" />
				<text>系统信息</text>
			</view>
			<view class="card-detail">
				<view class="ful-detail">
					<view class="detail-left">医院名称</view>
					<view class="detail-right">{{order_detail.hospital.name||'-'}}</view>
				</view>
				<view class="ful-detail">
					<view class="detail-left">设备序列号</view>
					<view class="detail-right">{{order_detail.equipment.serial||'暂无'}}</view>
				</view>
				<view class="ful-detail" v-if="order_detail.type_data==1">
					<view class="detail-left">合同状态</view>
					<view class="detail-right">{{changeContract(order_detail.contract_status)}}</view>
				</view>
				<view class="ful-detail">
					<view class="detail-left">保养日期</view>
					<view class="detail-right">{{order_detail.createtime||'-'}}</view>
				</view>
				<view class="ful-detail">
					<view class="detail-left">现场服务工单号</view>
					<view class="detail-right">{{order_detail.workID||'-'}}</view>
				</view>
				<view class="ful-detail">
					<view class="detail-left">保养工程师</view>
					<view class="detail-right">{{engineer||'-'}}</view>
				</view>
			</view>

			<cora ref="ctb" @geArr="geArr" v-if="typeData=='MRI'&&service_default=='A级保养'"></cora>
			<corb ref="ctb" @geArr="geArr" v-if="typeData=='MRI'&&service_default=='B级保养'"></corb>
			<cta ref="ctb" @geArr="geArr" v-if="typeData=='CT'&&service_default=='A级保养'"></cta>
			<ctb ref="ctb" @geArr="geArr" v-if="typeData=='CT'&&service_default=='B级保养'"></ctb>
			<dra ref="ctb" @geArr="geArr" v-if="typeData=='DR'&&service_default=='A级保养'"></dra>
			<drb ref="ctb" @geArr="geArr" v-if="typeData=='DR'&&service_default=='B级保养'"></drb>
			<dsa ref="ctb" @geArr="geArr" v-if="typeData=='DSA'&&service_default=='A级保养'"></dsa>
			<dsb ref="ctb" @geArr="geArr" v-if="typeData=='DSA'&&service_default=='B级保养'"></dsb>
			<wave ref="ctb" @geArr="geArr" v-if="typeData=='超声'"></wave>
			<wca ref="ctb" @geArr="geArr" v-if="typeData=='DR/F'&&service_default=='A级保养'"></wca>
			<wcb ref="ctb" @geArr="geArr" v-if="typeData=='DR/F'&&service_default=='B级保养'"></wcb>
			<smallc ref="ctb" @geArr="geArr" v-if="typeData=='小C'"></smallc>
			<view class="title">
				<view class="repair-left" />
				<text>服务信息</text>
			</view>
			<view class="card-detail">
				<view class="ful-detail">
					<view class="detail-left">工程师到达时间</view>
					<view class="detail-right">
						<xp-picker @input="confirm">{{arrive_time}}</xp-picker>
					</view>
				</view>
				<view class="ful-detail" v-if="order_detail.type_data==0">
					<view class="detail-left">
						设备合同状态
					</view>
					<view class="detail-right" style="flex:1">
						<picker mode="selector" :range="contract_status_data" :value="contract_default"
							@change="bindDateChange">
							<view class="uni-input">{{contract_default || '请选择'}}</view>
						</picker>
						<view class="arrow" />
					</view>
				</view>
				<view class="ful-detail">
					<view class="detail-left">保养记录</view>
					<view class="detail-right" style="flex:1">
						<textarea v-model="repair_record" placeholder-style="font-size: 28rpx;color: #999999;"
							placeholder="请输入内容" maxlength="140" auto-height />
					</view>
				</view>
			</view>
			<view class="title">
				<view class="repair-left" />
				<text>保养照片上传（9张）</text>
			</view>
			<view class="enclosure">
				<view class="enclosure_img" v-for="(item, index) in photoList" :key="index">
					<view class="img_del" @click="delImg(index)">
						<image src="../../static/delect.png" mode="aspectFill" />
					</view>
					<image :src="item" mode="aspectFill" @click="preview(item)" />
				</view>
				<view class="add_btn" v-if="photoList.length < 9" @click="choosePhoto">
					<image src="../../static/add.png" class="img" />
				</view>
			</view>
			<view class="title">
				<view class="repair-left" />
				<text>保养结果及建议</text>
			</view>
			<view class="proposal">
				<u--textarea border="none" v-model="ending" auto-height height="80" placeholder=" " autoHeight
					placeholder-style="font-size: 28rpx;color: #434343;backgroundColor:#999999;"></u--textarea>
				<!-- 				<textarea v-model="ending" placeholder-style="font-size: 28rpx;color: #434343;" 
					maxlength="140" auto-height /> -->
			</view>
		</view>
		<view class="submit_box">
			<view class="submit" @tap="submit">
				提交申请接单
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/request/baseUrl.js'
	import cta from "@/components/model/CTA.vue"
	import ctb from "@/components/model/CTB.vue"
	import dra from "@/components/model/DRA.vue"
	import drb from "@/components/model/DRB.vue"
	import cora from "@/components/model/CORA.vue"
	import corb from "@/components/model/CORB.vue"
	import dsa from "@/components/model/DSA.vue"
	import dsb from "@/components/model/DSB.vue"
	import wca from "@/components/model/WCA.vue"
	import wcb from "@/components/model/WCB.vue"
	import smallc from "@/components/model/SMALLC.vue"
	import wave from "@/components/model/WAVE.vue"


	export default {
		components: {
			dra,
			drb,
			cta,
			ctb,
			cora,
			corb,
			dsa,
			dsb,
			wca,
			wcb,
			smallc,
			wave
		},
		data() {
			return {
				baseUrl: baseUrl,
				service_type: null, //服务类型:0=维修,1=保养,2=安装
				contract_default: '请选择',
				service_default: '请选择',
				// contract_status_data: ['技术保合同', '无合同', '标准白金合同', '单次合同'],
				contract_status_data: ['无合同', '整机技术保合同', '整机银保合同', '整机金保合同', '整机铂金保合同', '单次保养合同', '单次维修合同'],
				service_type_data: ['维修', '保养'],
				reportType: [],
				warranty_id: null, //工单id 
				service_id: null, //维修id
				order_detail: {}, //订单详情
				arrive_time: '请选择时间', //工程师到达时间
				repair_record: '', // 维修记录
				ending: '', //维修结果及建议
				engineer: '',
				phone: '',
				content: '',
				photoList: [], // 图片列表
				arr_list: [],
				typeData: "",
				report_type: 2,
				isSubmit: true
			}
		},

		onLoad(e) {
			/*  warranty_id 工单id    service_id维修id
			 */
			this.warranty_id = e.warranty_id
			this.service_type = e.service_type
			this.service_id = e.service_id
			this.getDetail()
			this.getUser()
		},
		onShow() {
			let photo = uni.getStorageSync('statement-photo');
			if (photo) {
				this.photoList = photo
			}
		},
		onUnload() {
			uni.removeStorageSync('statement-photo');
		},
		methods: {
			/* 转化 合同状态  */
			changeContract(i) {
				// 6单次维修合同、5单次保养合同、4整机铂金保合同、3整机金保合同、2整机银保合同、1整机技术保合同、0无合同
				switch (i) {
					case '0':
						return '无合同';
					case '1':
						return '整机技术保合同';
					case '2':
						return '整机银保合同';
					case '3':
						return '整机金保合同';
					case '4':
						return '整机铂金保合同';
					case '5':
						return '单次保养合同';
					case '6':
						return '单次维修合同';
					default:
						return '暂无'
				}
			},
			bindDateChange(e) {
				this.contract_default = this.contract_status_data[e.detail.value]
				this.contract_status = e.detail.value
			},
			choiceType() {
				switch (this.typeData) {
					case 'CT':
						this.service_type_data = ['A级保养', 'B级保养']
						break;
					case 'DR':
						this.service_type_data = ['A级保养', 'B级保养']
						break;
					case 'DSA':
						this.service_type_data = ['A级保养', 'B级保养']
						break;
					case '超声':
						this.service_type_data = ['保养']
						break;
					case 'MRI':
						this.service_type_data = ['A级保养', 'B级保养']
						break;
					case 'DR/F':
						this.service_type_data = ['A级保养', 'B级保养']
						break;
					case '小C':
						this.service_type_data = ['保养']
						break;
					default:
						break;
				}
				uni.showActionSheet({
					itemList: this.service_type_data,
					success: res => {
						this.service_default = this.service_type_data[res.tapIndex]
						this.report_type = this.service_default == 'A级保养' ? 0 : (this.service_default ==
							'B级保养' ? 1 : 2)
					},
					fail: res => {
						console.log(res.errMsg);
					}
				});

			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {
				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 获取工单详情 */
			getDetail() {
				this.$https.post('/warranty/details', {
					warranty_id: this.warranty_id
				}).then(res => {
					this.order_detail = res.data
					this.typeData = this.order_detail.equipment.pinpai.name
					if (this.order_detail?.images) { //存在照片或视频
						let images = this.order_detail.images?.split(',') || [] //字符串转数组  获取照片和视频
						this.order_detail.multiMedia = {
							imgs: [],
							video: ''
						}
						images.forEach(item3 => {
							if (this.judgmentFile(item3)) {
								this.order_detail.multiMedia.video = item3
							} else {
								this.order_detail.multiMedia.imgs.push(item3)
							}
						})
					}
				})
			},
			/* 获取当前 工程师名称 */

			getUser() {
				this.$https.post('/user/getUser').then(res => {
					this.engineer = res.data.user.nickname;
					this.phone = res.data.user.mobile
				})
			},
			/* 工程师到达时间 */
			confirm(e) {
				this.arrive_time = e
			},
			/* 选择照片 */
			choosePhoto() {
				uni.navigateTo({
					url: '/pages/statement/choosePhoto?warranty_id=' + this.warranty_id
				})
			},
			// 删除照片
			delImg(index) {
				this.photoList.splice(index, 1);
				uni.setStorageSync('statement-photo', this.photoList)
			},
			// 图片预览
			preview(current) {
				uni.previewImage({
					current: current,
					urls: this.photoList
				});
			},
			geArr(e) {
				this.arr_list = e
			},
			/* 提交 */
			submit(e) {
				if (this.service_default == '请选择') {
					uni.showToast({
						icon: 'none',
						title: "请选择报告级别！",
						duration: 1500
					})
				}

				this.$refs.ctb.getArr();
				if (this.photoList.join(",") == '' || this.photoList.length < 9) {
					uni.showToast({
						icon: 'none',
						title: "请上传9张保养图片！",
						duration: 1500
					})
					return
				}

				if (!this.contract_status && this.order_detail.type_data == 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择设备合同状态！",
						duration: 1500
					})
					return
				}
				if (this.arrive_time != '请选择时间') {
					if (!this.isSubmit) return
					this.isSubmit = false
					this.$https.post('/warranty/statement', {
						warranty_id: this.warranty_id, //工单id
						arr_list: this.arr_list,
						service_id: this.service_id, //维修id
						contract_status: this.order_detail.contract_status ? this.order_detail.contract_status :
							this.contract_status,
						service_type: this.service_type, //服务类型:0=维修,1=保养,2=安装
						present_time: this.arrive_time, //到场时间
						repair_record: this.repair_record, // 维修记录
						ending: this.ending, //维修结果及建议
						content: this.content, //报修内容
						images: this.photoList.join(","),
						report_type: this.report_type,
						// is_backup: this.service_type != 2 ? 0 : 1
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							success: () => {
								uni.removeStorageSync('statement-photo')
								uni.removeStorageSync('statement-temp')
								setTimeout(() => {
									this.isSubmit = true
									uni.navigateBack({
										delta: res
									})
								}, 400)
							}
						})
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请选择工程师到达时间！",
						duration: 1500
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit_box {
		background-color: #fff;
		width: 740rpx;
		height: 170rpx;
		position: fixed;
		bottom: 0;
		left: 0%;
		z-index: 998;
	}

	.submit {
		/* border-top: 75rpx solid #f7f8fb;
		border-bottom: 50rpx solid #f7f8fb; */
		margin: 75rpx auto 50rpx;
		width: 622rpx;
		height: 80rpx;
		background: #257EFA;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		letter-spacing: 8rpx;
		text-align: center;
		position: fixed;
		bottom: 1%;
		left: 8%;
	}

	.statement {
		background-color: #F5F6F8;
		overflow: hidden;
		height: 200vh;

		.creatBg {
			width: 100%;
			height: 210rpx;
		}
	}

	.repair_main {
		margin: 20rpx;
		position: absolute;
		top: 9%;
		width: 94%;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		padding-bottom: 150rpx;
		margin-bottom: 150rpx;
	}

	.repair-left {
		width: 10rpx;
		height: 32rpx;
		margin-right: 10rpx;
		background-color: #1A66FF;
	}

	.statement-engineer {
		padding: 24rpx 32rpx;
		background: #FFEFE6;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF6619;
	}

	.title {
		padding: 16rpx 12rpx;
		background-color: #fff;
		font-size: 31rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 600;
		color: #434343;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.card-detail {
		background-color: #FFFFFF;

		.ful-detail {
			margin: 0 10rpx;
			padding: 20rpx 10rpx 6rpx;

			.detail-left {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 14rpx;
				color: #3B3D3D;
				line-height: 33rpx;
			}

			.detail-right {
				background-color: #F5F6F8;
				font-size: 28rpx;
				font-weight: 500;
				color: #000;
				padding: 14rpx 20rpx;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.arrow {
					position: absolute;
					width: 14rpx;
					height: 14rpx;
					border-right: 3rpx solid #BBBBBB;
					border-bottom: 3rpx solid #BBBBBB;
					right: 32rpx;
					transform: rotate(-45deg);
				}
			}
		}
	}

	.enclosure {
		background-color: #FFFFFF;
		padding: 22rpx 22rpx;

		.enclosure_tro {
			font-size: 24rpx;
			// font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #000;
		}

		.enclosure_img {
			display: inline-block;
			width: 150rpx;
			height: 150rpx;
			margin-right: 14rpx;
			position: relative;

			&:nth-child(8) {
				margin-right: 0;
			}

			image {
				width: 100%;
				height: 100%;
			}

			.img_del {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 150rpx;
				height: 34rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.add_btn {
			width: 150rpx;
			height: 150rpx;
			background: #F5F6F8;
			border-radius: 8rpx;
			position: relative;
			overflow: hidden;
			display: inline-block;

			.img {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -15rpx;
				margin-left: -15rpx;
			}
		}
	}

	.proposal {
		margin: 14rpx 26rpx;
		padding: 22rpx 32rpx;
		background-color: #F7F8FB;
		margin-bottom: 100rpx;

		textarea {
			height: 100%;
			width: 100%;
		}
	}

	/* 设置input框提示内容的样式 */
	input::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	input::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	input:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	input:-ms-input-placeholder {
		color: #434343;
	}

	/* 设置textarea框提示内容的样式 */
	textarea::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	textarea::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	textarea:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	textarea:-ms-input-placeholder {
		color: #434343;
	}

	/deep/ .xp-picker-mask {
		z-index: 222;
	}
</style>